@charset "utf-8";
@import "reset";
@import "utils";
@import "common";
body {
    overflow: hidden;
}

.Invite-web {
    @include webbg;
    //  口号：电量如此
    .title {
        width: r(530);
        height: r(185);
        margin: 0 auto;
        margin-bottom: r(10);
        border-bottom: 1px solid #bdbab2;
        .title1,
        .title2 {
            width: r(405);
            height: r(63);
            margin: 0 auto;
            animation: bounceIn 1s;
            @include aImg;
        }
        .title1 {
            margin: r(40) auto r(30);
        }
    }
    //  充电量
    .charging-amount {
        width: r(340);
        height: r(190);
        margin: 0 auto;
        p {
            font-size: r(26);
            color: #353432;
            letter-spacing: r(5);
            margin-left: 5%;
        }
        .dianchisa {
            width: r(340);
            height: r(150);
            background: url(../img/Invite/chongdiankuang.png) no-repeat;
            background-size: r(340) r(150);
            padding-top: 4.5%;
            padding-left: r(15);
            margin-top: r(10);
            .fuzhi {
                height: r(120);
                background: #0de100;
                border-radius: r(20);
                font-size: r(70);
                color: white;
                text-align: center;
                line-height: r(120);
                font-weight: bold;
                text-stroke: 1px #1aab00;
                -webkit-text-stroke: 1px #1aab00;
                p {
                    font-size: r(70);
                    color: white;
                }
            }
        }
    }
    //  店铺红包
    .hongbao {
        text-align: center;
        color: #e3323e;
        font-weight: bold;
        p {
            font-size: r(30);
            span {
                color: #796557;
            }
        }
        p:first-child {
            margin: r(20) auto r(5);
        }
        .zixun {
            width: r(460);
            height: r(45);
            margin: 0 auto;
            background: white;
            border-radius: r(20);
            font-size: r(20);
            text-align: center;
            line-height: r(45);
            color: #3d3d3d;
            margin-top: r(10);
        }
    }
    //  感叹号！
    .gantan {
        width: r(480);
        height: r(75);
        margin: 0 auto;
        font-size: r(20);
        color: #555450;
        border-radius: r(60);
        margin-top: r(40);
        background: #c8c2b7;
        border-top: 1px solid white;
        border-bottom: 1px solid #8a827a;
        padding-top: r(5);
        padding-left: r(7);
        white-space: nowrap;
        //      -webkit-box-shadow: #666 0px 0px 5px;
        //      -moz-box-shadow: #666 0px 0px 5px;
        //      box-shadow: #666 0px 0px 5px;
        div {
            display: inline-block;
            vertical-align: middle;
        }
        div:first-child {
            width: r(65);
            height: r(65);
            border-radius: 50%;
            background: #5c4233;
            overflow: hidden;
            position: relative;
            margin-right: r(10);
            animation: flash 3s;
            img {
                position: absolute;
                height: 75%;
                top: -9999px;
                bottom: -9999px;
                left: -9999px;
                right: -9999px;
                margin: auto;
            }
        }
    }
    //  邀请好友再玩一次\
    .anniu {
        width: r(500);
        height: r(80);
        margin: 0 auto;
        font-size: r(40);
        color: white;
        text-align: center;
        line-height: r(80);
        letter-spacing: r(5);
        margin-top: r(30);
        .anniu1 {
            width: r(200);
            height: r(80);
            float: left;
            border: 1px solid white;
            border-radius: r(10);
        }
        .anniu2 {
            width: r(200);
            height: r(80);
            float: right;
            border: 1px solid white;
            border-radius: r(10);
        }
    }
    //  点击分享到朋友圈
    .share {
        width: 100%;
        //      height: 100%;
        position: absolute;
        background: rgba(0, 0, 0, .8);
        top: 0;
        left: 0;
        color: white;
        font-size: r(40);
        text-align: center;
        display: none;
        .zhibiao {
            height: r(440);
            overflow: hidden;
            position: relative;
            margin-bottom: r(20);
            img {
                position: absolute;
                height: 100%;
                top: 10%;
                right: 10%;
            }
        }
        p {
            line-height: r(70);
        }
    }
    .fangda {
        animation: suoxiao .5s linear both;
    }
    @keyframes suoxiao {
        0% {
            transform: scale(0);
        }
        100% {
            transform: scale(1);
        }
    }
}